import React, { useLayoutEffect } from 'react';
import {
  View,
  Image,
  Text,
  navigateTo,
  hideMenuButton,
  exitMiniProgram,
  router,
} from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
import { getCachedLaunchOptions } from '@/api/getCachedLaunchOptions';
import { NavBar } from '@ray-js/smart-ui';
import res from '@/res/images';
import { useWeekWeather, type Weather } from '@/hooks/useWeekWeather';
import Strings from '@/i18n';
import clsx from 'clsx';
import loadingIcon from './loading.png';
import styles from './index.module.less';

const rainOrder = [
  101, 102, 107, 111, 112, 113, 118, 122, 123, 125, 134, 137, 139, 141, 143, 144, 145,
];

const snowOrder = [104, 105, 106, 124, 126, 128, 130, 131, 138];

const cloudOrder = [103, 109, 110, 114, 116, 117, 121, 129, 132, 140, 142];

const sunnyOrder = [120, 119, 146];

const iceOrder = [115, 127, 133, 136];

export function WeatherBox() {
  const { weekNumber, weekWeathers, loading } = useWeekWeather();

  const renderLoading = () => {
    return <Image src={loadingIcon} className={styles.loadingIcon} />;
  };

  const getImage = (conditionNum: string) => {
    if (rainOrder.includes(Number(conditionNum))) {
      return res.rain;
    }
    if (snowOrder.includes(Number(conditionNum))) {
      return res.snow;
    }
    if (cloudOrder.includes(Number(conditionNum))) {
      return res.cloud;
    }
    if (sunnyOrder.includes(Number(conditionNum))) {
      return res.sun;
    }
    if (iceOrder.includes(Number(conditionNum))) {
      return res.bingbao;
    }

    return res.cloud;
  };

  return (
    <View className={styles.weather}>
      {loading ? (
        renderLoading()
      ) : (
        <View className={styles.weatherBox}>
          {weekWeathers.map((item, index) => {
            const isActive = weekNumber.toString(7) === index.toString();
            console.log('🚀 ~ file: index.tsx:67 ~ isActive:', isActive);
            return (
              <View key={index} className={styles.weatherBoxItem}>
                <Text className={clsx(styles.weatherBoxItemText, isActive && styles.active)}>
                  {/* @ts-ignore */}
                  {Strings.getLang(`day_${index}`)}
                </Text>
                <Image src={getImage(item.conditionNum)} className={styles.weatherIcon} />
                <Text
                  className={clsx(styles.weatherBoxItemText, isActive && styles.active)}
                >{`${Number(item.thigh).toFixed(0)}°C`}</Text>
                <Text className={clsx(styles.weatherBoxItemText, styles.tlow)}>{`${Number(
                  item.tlow
                ).toFixed(0)}°C`}</Text>
              </View>
            );
          })}
        </View>
      )}
    </View>
  );
}

export default WeatherBox;
